JavaScript Code Quality Gates: Die Konfiguration von Pre-Commit-Hooks meistern

In der sich ständig weiterentwickelnden Welt der Softwareentwicklung ist die Aufrechterhaltung einer hohen Code-Qualität von größter Bedeutung. Sauberer, gut formatierter und fehlerfreier Code reduziert nicht nur die Wartungskosten, sondern fördert auch die Zusammenarbeit und beschleunigt die Entwicklungszyklen. Eine leistungsstarke Technik zur Durchsetzung der Code-Qualität ist die Implementierung von Code Quality Gates mithilfe von Pre-Commit-Hooks. Dieser Artikel bietet eine umfassende Anleitung zur Konfiguration von Pre-Commit-Hooks für JavaScript-Projekte, mit der Sie die Überprüfung der Code-Qualität automatisieren können, bevor der Code überhaupt in Ihr Repository gelangt.

Was sind Pre-Commit-Hooks?

Git-Hooks sind Skripte, die Git vor oder nach Ereignissen wie Commit, Push und Receive ausführt. Pre-Commit-Hooks werden speziell ausgeführt, bevor ein Commit abgeschlossen wird. Sie bieten eine entscheidende Möglichkeit, die zu committenden Änderungen zu überprüfen und Commits zu verhindern, die vordefinierte Qualitätsstandards nicht erfüllen. Betrachten Sie sie als Torwächter, die verhindern, dass Code von geringer Qualität in Ihre Codebasis gelangt.

Warum Pre-Commit-Hooks für die JavaScript-Code-Qualität verwenden?

• Frühe Fehlererkennung: Pre-Commit-Hooks erkennen Probleme mit der Code-Qualität früh im Entwicklungsprozess und verhindern so deren weitere Verbreitung. Dies ist weitaus effizienter, als Probleme bei Code-Reviews oder, noch schlimmer, in der Produktion zu entdecken.
• Automatisierte Code-Formatierung: Stellen Sie einen konsistenten Code-Stil in Ihrem Team und Projekt sicher. Die automatisierte Formatierung verhindert stilistische Debatten und trägt zu einer besser lesbaren Codebasis bei.
• Reduzierte Belastung bei Code-Reviews: Durch die automatische Durchsetzung von Programmierstandards verringern Pre-Commit-Hooks die Belastung für Code-Reviewer, sodass diese sich auf Architekturentscheidungen und komplexe Logik konzentrieren können.
• Verbesserte Wartbarkeit des Codes: Eine konsistente und qualitativ hochwertige Codebasis ist im Laufe der Zeit einfacher zu warten und weiterzuentwickeln.
• Erzwungene Konsistenz: Sie stellen sicher, dass der gesamte Code den Projektstandards entspricht, unabhängig davon, welcher Entwickler ihn geschrieben hat. Dies ist besonders wichtig in verteilten Teams, die von verschiedenen Standorten aus arbeiten – sagen wir, London, Tokio und Buenos Aires – wo individuelle Programmierstile variieren können.

Wichtige Werkzeuge für die JavaScript-Code-Qualität

Mehrere Werkzeuge werden häufig in Verbindung mit Pre-Commit-Hooks verwendet, um die Überprüfung der JavaScript-Code-Qualität zu automatisieren:

• ESLint: Ein leistungsstarker JavaScript-Linter, der potenzielle Fehler identifiziert, Programmierstile durchsetzt und die Lesbarkeit des Codes verbessert. Es unterstützt eine breite Palette von Regeln und ist hochgradig konfigurierbar.
• Prettier: Ein meinungsstarker Code-Formatierer, der Code automatisch formatiert, um einem konsistenten Stil zu entsprechen. Er unterstützt JavaScript, TypeScript, JSX und viele andere Sprachen.
• Husky: Ein Werkzeug, das die Verwaltung von Git-Hooks erleichtert. Es ermöglicht Ihnen, Skripte zu definieren, die in verschiedenen Phasen des Git-Workflows ausgeführt werden.
• lint-staged: Ein Werkzeug, das Linter und Formatierer nur auf bereitgestellte (staged) Dateien anwendet, was den Pre-Commit-Prozess erheblich beschleunigt. Dies verhindert unnötige Überprüfungen von unveränderten Dateien.

Konfiguration von Pre-Commit-Hooks: Eine Schritt-für-Schritt-Anleitung

Hier ist eine detaillierte Anleitung, wie Sie Pre-Commit-Hooks für Ihr JavaScript-Projekt mit Husky und lint-staged einrichten:

Schritt 1: Abhängigkeiten installieren

Installieren Sie zuerst die notwendigen Pakete als Entwicklungsabhängigkeiten mit npm oder yarn:

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Oder mit yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Schritt 2: Husky initialisieren

Husky vereinfacht den Prozess der Verwaltung von Git-Hooks. Initialisieren Sie es mit dem folgenden Befehl:

            npx husky install
            

              
                Copy
              
            
          

Dies erstellt ein `.husky`-Verzeichnis in Ihrem Projekt, in dem Ihre Git-Hooks gespeichert werden.

Schritt 3: Den Pre-Commit-Hook konfigurieren

Fügen Sie einen Pre-Commit-Hook mit Husky hinzu:

            npx husky add .husky/pre-commit "npx lint-staged"
            

              
                Copy
              
            
          

Dieser Befehl erstellt eine `pre-commit`-Datei im `.husky`-Verzeichnis und fügt den Befehl `npx lint-staged` hinzu. Dies weist Git an, lint-staged vor jedem Commit auszuführen.

Schritt 4: lint-staged konfigurieren

lint-staged ermöglicht es Ihnen, Linter und Formatierer nur auf die bereitgestellten (staged) Dateien anzuwenden, was den Pre-Commit-Prozess erheblich beschleunigt. Erstellen Sie eine `lint-staged.config.js`-Datei (oder `lint-staged.config.mjs` für ES-Module) im Stammverzeichnis Ihres Projekts und konfigurieren Sie sie wie folgt:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

Diese Konfiguration weist lint-staged an, ESLint und Prettier auf alle bereitgestellten JavaScript- und TypeScript-Dateien anzuwenden. Das `--fix`-Flag in ESLint korrigiert automatisch alle Linting-Fehler, die automatisch behoben werden können, und das `--write`-Flag in Prettier formatiert die Dateien und überschreibt sie mit dem formatierten Code.

Alternativ können Sie die Konfiguration direkt in Ihrer `package.json`-Datei definieren:

            {
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}
            

              
                Copy
              
            
          

Schritt 5: ESLint konfigurieren

Falls Sie es noch nicht getan haben, konfigurieren Sie ESLint für Ihr Projekt. Sie können eine ESLint-Konfigurationsdatei mit dem folgenden Befehl erstellen:

            npx eslint --init
            

              
                Copy
              
            
          

Dies führt Sie durch den Prozess der Erstellung einer ESLint-Konfigurationsdatei (`.eslintrc.js`, `.eslintrc.json` oder `.eslintrc.yml`) basierend auf den Anforderungen Ihres Projekts. Sie können aus einer Vielzahl vordefinierter Konfigurationen wählen oder Ihre eigenen benutzerdefinierten Regeln erstellen.

Beispiel `.eslintrc.js`:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/prop-types': 'off'
  }
};
            

              
                Copy
              
            
          

Diese Konfiguration erweitert die empfohlenen ESLint-Regeln, die empfohlenen React-Regeln, die empfohlenen TypeScript-Regeln und integriert sich mit Prettier. Sie deaktiviert auch die `react/prop-types`-Regel und setzt die `no-unused-vars`-Regel auf eine Warnung.

Schritt 6: Prettier konfigurieren

Konfigurieren Sie Prettier, indem Sie eine `.prettierrc.js`-Datei (oder `.prettierrc.json`, `.prettierrc.yml` oder `.prettierrc.toml`) im Stammverzeichnis Ihres Projekts erstellen. Sie können die Formatierungsoptionen von Prettier an die Stilrichtlinien Ihres Projekts anpassen.

Beispiel `.prettierrc.js`:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};
            

              
                Copy
              
            
          

Diese Konfiguration stellt Prettier so ein, dass einfache Anführungszeichen, keine Semikolons, nachgestellte Kommas, eine Zeilenbreite von 120 Zeichen und eine Tabulatorbreite von 2 Leerzeichen verwendet werden.

Alternativ können Sie die Prettier-Konfiguration innerhalb der `package.json` definieren:

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

Schritt 7: Ihre Konfiguration testen

Um Ihre Konfiguration zu testen, stellen Sie einige Änderungen bereit (stage) und versuchen Sie, sie zu committen. Zum Beispiel:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

Wenn es irgendwelche Linting- oder Formatierungsprobleme gibt, werden ESLint und Prettier diese automatisch beheben (falls möglich) oder Fehler melden. Wenn Fehler gemeldet werden, wird der Commit abgebrochen, sodass Sie die Probleme beheben können, bevor Sie erneut committen.

Erweiterte Konfigurationsoptionen

Verwendung verschiedener Linter und Formatierer

Sie können problemlos andere Linter und Formatierer in Ihre Pre-Commit-Hook-Konfiguration integrieren. Sie können zum Beispiel Stylelint zum Linting von CSS- oder SASS-Dateien verwenden:

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

Aktualisieren Sie dann Ihre `lint-staged.config.js`-Datei, um Stylelint einzuschließen:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Tests vor dem Commit ausführen

Sie können auch Ihre Unit-Tests als Teil des Pre-Commit-Hooks ausführen. Dies hilft sicherzustellen, dass Ihr Code korrekt funktioniert, bevor er committet wird. Angenommen, Sie verwenden Jest:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Aktualisieren Sie Ihre `lint-staged.config.js`-Datei, um den Testbefehl einzuschließen:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Das `--findRelatedTests`-Flag weist Jest an, nur Tests auszuführen, die sich auf die geänderten Dateien beziehen, was den Prozess erheblich beschleunigt.

Pre-Commit-Hooks überspringen

In einigen Fällen möchten Sie die Pre-Commit-Hooks möglicherweise vorübergehend überspringen. Sie können dies tun, indem Sie das `--no-verify`-Flag mit dem `git commit`-Befehl verwenden:

            git commit --no-verify -m "Commit message"
            

              
                Copy
              
            
          

Es wird jedoch generell empfohlen, das Überspringen der Hooks zu vermeiden, es sei denn, es ist absolut notwendig, da sie eine entscheidende Rolle bei der Aufrechterhaltung der Code-Qualität spielen.

Fehlerbehebung bei häufigen Problemen

• Hooks werden nicht ausgeführt: Stellen Sie sicher, dass Husky ordnungsgemäß installiert und initialisiert ist und dass das `.husky`-Verzeichnis im Stammverzeichnis Ihres Projekts existiert. Überprüfen Sie auch, ob die `pre-commit`-Datei im `.husky`-Verzeichnis ausführbar ist.
• Linting-Fehler werden nicht behoben: Stellen Sie sicher, dass das `--fix`-Flag mit ESLint verwendet wird und dass Ihre ESLint-Konfiguration so eingerichtet ist, dass bestimmte Arten von Fehlern automatisch behoben werden.
• Prettier formatiert Dateien nicht: Stellen Sie sicher, dass das `--write`-Flag mit Prettier verwendet wird und dass Ihre Prettier-Konfiguration ordnungsgemäß eingerichtet ist.
• Langsame Pre-Commit-Hooks: Verwenden Sie lint-staged, um Linter und Formatierer nur auf bereitgestellte Dateien anzuwenden. Erwägen Sie auch, Ihre ESLint- und Prettier-Konfigurationen zu optimieren, um die Anzahl der überprüften Regeln und Einstellungen zu minimieren.
• Konfliktierende Konfigurationen: Stellen Sie sicher, dass Ihre ESLint- und Prettier-Konfigurationen nicht miteinander in Konflikt stehen. Wenn dies der Fall ist, müssen Sie möglicherweise eine oder beide Konfigurationen anpassen, um die Konflikte zu lösen. Erwägen Sie die Verwendung einer gemeinsamen Konfiguration wie `eslint-config-prettier` und `eslint-plugin-prettier`, um Konflikte zu vermeiden.

Best Practices für Pre-Commit-Hooks

• Halten Sie Hooks schnell: Langsame Hooks können die Produktivität der Entwickler erheblich beeinträchtigen. Verwenden Sie lint-staged, um nur bereitgestellte Dateien zu verarbeiten, und optimieren Sie Ihre Linter- und Formatierer-Konfigurationen.
• Stellen Sie klare Fehlermeldungen bereit: Wenn ein Hook fehlschlägt, geben Sie klare und informative Fehlermeldungen aus, um Entwicklern bei der Behebung der Probleme zu helfen.
• Automatisieren Sie so viel wie möglich: Automatisieren Sie die Code-Formatierung und das Linting, um den manuellen Aufwand zu minimieren und Konsistenz zu gewährleisten.
• Schulen Sie Ihr Team: Stellen Sie sicher, dass alle Teammitglieder den Zweck der Pre-Commit-Hooks verstehen und wissen, wie man sie effektiv einsetzt.
• Verwenden Sie eine konsistente Konfiguration: Pflegen Sie eine konsistente Konfiguration für ESLint, Prettier und andere Werkzeuge in Ihrem gesamten Projekt. Dies hilft sicherzustellen, dass der gesamte Code auf die gleiche Weise formatiert und gelintet wird. Erwägen Sie die Verwendung eines gemeinsam genutzten Konfigurationspakets, das einfach über mehrere Projekte hinweg installiert und aktualisiert werden kann.
• Testen Sie Ihre Hooks: Testen Sie Ihre Pre-Commit-Hooks regelmäßig, um sicherzustellen, dass sie korrekt funktionieren und keine unerwarteten Probleme verursachen.

Globale Überlegungen

Bei der Arbeit in global verteilten Teams sollten Sie Folgendes beachten:

• Konsistente Werkzeugversionen: Stellen Sie sicher, dass alle Teammitglieder die gleichen Versionen von ESLint, Prettier, Husky und lint-staged verwenden. Dies kann erreicht werden, indem die Versionen in Ihrer `package.json`-Datei angegeben und ein Paketmanager wie npm oder yarn zur Installation der Abhängigkeiten verwendet wird.
• Plattformübergreifende Kompatibilität: Testen Sie Ihre Pre-Commit-Hooks auf verschiedenen Betriebssystemen (Windows, macOS, Linux), um sicherzustellen, dass sie auf allen Plattformen korrekt funktionieren. Verwenden Sie nach Möglichkeit plattformübergreifende Werkzeuge und Befehle.
• Zeitzonenunterschiede: Berücksichtigen Sie Zeitzonenunterschiede bei der Kommunikation mit Teammitgliedern über Probleme mit Pre-Commit-Hooks. Stellen Sie klare Anweisungen und Beispiele bereit, um ihnen bei der schnellen Lösung der Probleme zu helfen.
• Sprachunterstützung: Wenn Ihr Projekt die Arbeit mit mehreren Sprachen umfasst, stellen Sie sicher, dass Ihre Pre-Commit-Hooks alle im Projekt verwendeten Sprachen unterstützen. Möglicherweise müssen Sie zusätzliche Linter und Formatierer für jede Sprache installieren.

Fazit

Die Implementierung von Pre-Commit-Hooks ist eine effektive Methode, um die Code-Qualität durchzusetzen, die Zusammenarbeit im Team zu verbessern und die Wartungskosten in JavaScript-Projekten zu senken. Durch die Integration von Werkzeugen wie ESLint, Prettier, Husky und lint-staged können Sie die Code-Formatierung, das Linting und das Testen automatisieren und so sicherstellen, dass nur qualitativ hochwertiger Code in Ihr Repository committet wird. Indem Sie die in dieser Anleitung beschriebenen Schritte befolgen, können Sie ein robustes Code-Qualitäts-Gate einrichten, das Ihnen hilft, sauberere, wartbarere und zuverlässigere JavaScript-Anwendungen zu erstellen. Machen Sie sich diese Praxis zu eigen und heben Sie den Entwicklungsworkflow Ihres Teams noch heute auf ein neues Niveau.